<template>
	<view>
		<view class="lunbo">
			<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500"
				:circular="true" style="height: 700rpx;">
				<swiper-item v-for="(item,index) in dataArr.goodsSwiper" :key='index'>
					<image :src="'/static/Mall/'+dataArr.goodsSwiper[index]" class="Imge" />
				</swiper-item>
				
			</swiper>
		</view>
		<view class="commodityName">
			<p class="wz1 jianshen">{{dataArr.goodsName}}</p>
			<p class="wz2">积分兑换商品不支持售后退换货，请确定后兑换</p>
		</view>
		<view class="commodityPrice">
			<view class="wz3">
				积分:{{dataArr.goodsIntegration}}
			</view>
			<view class="wz4">
				已兑换:{{goodsnum.num}}
			</view>
		</view>
		<view class="switch">
			<view :class="col==0?'boder_bu':''" @click="grounp">
				详情
			</view>
			<view :class="col==1?'boder_bu':''" @click="shi">
				<uni-badge :text="pinglunnum.num" absolute="rightTop" :offset="[63,15]">
					<view class="pinlun">评论</view>
				</uni-badge>


			</view>
		</view>
		<ziOne v-show="col==0?true:false"></ziOne>
		<ziTwo v-show="col==1?true:false"></ziTwo>
		<view class="footer-box">
			<uni-goods-nav @click="onClick" :options="options" :button-group="buttonGroup" @buttonClick="buttonClick" />
		</view>

		<view class="tup1" @click="chakan">
			<uni-icons type="person" size="25" color="#FFFFFF"></uni-icons>
		</view>
	</view>
</template>

<script>
	import {

		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import ziOne from './Subcomponents/ziOne.vue';
	import ziTwo from './Subcomponents/ziTwo.vue';
	import myRequest from '../../utils/myRequest.js';
	export default {
		setup() {
			let data = reactive({
				pinglunnum:"",
				goodsnum:"",
				goodsId: "",
					col: 0,
					dataArr:[],
					options: [{
						icon: 'chat',
						text: '客服'
					}],
					buttonGroup: [{
						text: '立即下单',
						backgroundColor: '#3478F7',
						color: '#ffffff'
					}],
					grounp: function() {
						this.col = 0
					},
					onClick(e) {
						uni.showToast({
							title: `点击${e.content.text}`,
							icon: 'none'
						})
					},
					shi: function() {
						this.col = 1
					},
					buttonClick() {
						uni.navigateTo({
							url: '/pages/jifen/jiesuan?id='+data.dataArr.goodsId
						});
					},
					CommodityInformation:function(i){
						myRequest({
							url:"/getgoodsId",
								method:'POST',
									data:{
								id:i
							},
						}).then((res)=>{
							if(res.data.code==200){
								
								data.dataArr=res.data.data[0]
								data.dataArr.goodsSwiper = JSON.parse(data.dataArr.goodsSwiper);
								
							}
						})
						
						
						
					},
					queryQuantity:function(i){
						myRequest({
							url:"/getjifen",
							method:'POST',
							data:{
								id:i
							}
						}).then((res)=>{
							if(res.data.code==200){
								console.log(res.data.data[0].num)
								data.goodsnum=res.data.data[0]
							}
						})
					},
					numberComments:function(i){
						myRequest({
							url:"/getpin",
							method:'POST',
							data:{
								id:i
							}
						}).then((res)=>{
							if(res.data.code==200){
								console.log(res.data.data[0].num)
								data.pinglunnum=res.data.data[0]
							}
						})
					},
					chakan(){
						uni.navigateTo({
							url: '/pages/My/ChildrenPage/MyOrder'
						});
					}
					
					
					
				})
				
				onLoad((option)=>{
			data.goodsId=option.id;
			data.CommodityInformation(option.id)
			data.queryQuantity(option.id)
			data.numberComments(option.id)
		})
		return data;
		},
		
		components: {
			ziOne,
			ziTwo
		}




	}
</script>

<style lang="scss">
	.Imge{
		width: 100%;
		height: 700rpx;
	}
	.jianshen {
		margin-bottom: 20rpx;
	}

	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}

	.switch {
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		border-top: 1px #B9B9B9 solid;
		border-bottom: 1px #B9B9B9 solid;
	}

	.switch view {
		width: 375rpx;
		text-align: center;
	}

	.commodityName {
		padding: 25rpx;
	}

	.wz1 {
		font-size: 32rpx;
	}

	.wz2 {
		font-size: 24rpx;
	}

	.wz3 {
		font-size: 36rpx;
		color: #007AFF;
		margin-right: 80rpx;
	}

	.wz4 {
		font-size: 24rpx;
	}

	.commodityPrice {
		padding-left: 25rpx;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
	}

	.lunboA {
		background-color: #007AFF;
		height: 400rpx;
	}

	.lunboB {
		background-color: #18BC37;
		height: 400rpx;
	}

	.lunboC {
		background-color: #B500FE;
		height: 400rpx;
	}

	.boder_bu {
		font-weight: bold;
		border-bottom: 3px solid #000000;
	}

	.footer-box {
		position: fixed;
		bottom: 0;
		z-index: 999;
		width: 100%;
	}

	.tup1 {
		text-align: center;
		line-height: 70rpx;
		position: fixed;
		top: 850rpx;
		right: 10rpx;
		width: 70rpx;
		height: 70rpx;
		border: 1px solid #007AFF;
		border-radius: 50%;

		background-color: #007AFF;
	}
</style>
